import base from "../base.js"
// 引用影厅接口
import theaters from "../../api/theaters"
// 声明一个显示影院列表的类
const theatersProps = [{
    name: "放映厅名字",
    key: "theatersName"
}, {
    name: "是否在营业",
    key: "theatersStatus"
}, {
    name: "从属的影院",
    key: "cinemasId"
}]
export default class extends base {
    data = {
        curPage: 1, //当前页
        eachPage: 5, //每页显示的条数
        total: 0, //总条数
        maxPage: 0, //总页数
        rows: [], //当前页数据,
        selInfo: [], //查询到的数据
        selectOption: "",
        optionVlue: "",
    };
    render() {
        this.$el.html(`
            <div style="margin-top:2px;">
                <a href="" style="font-size:16px;">放映厅管理</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                <a href="" style="font-size:16px;">放映厅列表</a> 
            </div>
            <hr>
            <div>
                <h1 style="font-weight:bold;font-size:30px;margin:30px auto 30px;width:260px;">放 映 厅 列 表<h1/>        
            </div>
            <table class="layui-table" id="theatersTable" style="margin:auto;height:290px">
                <thead>
                    <tr>
                        <th style="width:250px;">
                        <span style="font-weight:bold;font-size:20px;margin-right:3px">影院:</span>
                        <select name="selectOption" id="selectOption" style="text-align:center;border:hidden;font-size:18px;background-color:#FAFAFA;text-align:left;"></select>
                        </th>
                        <th style="width:250px;">
                             <span style="font-weight:bold;font-size:20px;margin-right:3px">放映厅:</span>
                           <select name="selectvalue" id="selectvalue" style="border:hidden;font-size:18px;background-color:#FAFAFA"></select> 
                        </th>
                        <th style="width:100px;text-align:center;font-size:20px;font-weight:bold;">是否营业</th>
                        
                        <th style="width:100px;text-align:center;font-size:20px;font-weight:bold;">操作</th>
                    </tr>
                </thead>
                <tbody class="theaters-list" style="text-align:center">
            </table>
        <div style="font-size:18px;margin:10px 0px;text-align:center;padding:10px">
            当前页:<select class="curPage" name="curPage"></select>
             显示条数:<input type="text" style="width:30px;text-align:center" name="eachPage" value=${this.data.eachPage}>
            总条数:<span class="total"></span>
              <p style="margin:15px"><p/>
            <button class="layui-btn " id="first-btn">首页</button>
            <button class="layui-btn " id="prev-btn">上一页</button>
            <button class="layui-btn " id="next-btn">下一页</button>
            <button class="layui-btn " id="last-btn">尾页</button>
        </div>`);
        // 获取查找的下拉列表select,
        this.$selectOption = $("#selectOption");
        // 获取查找功能用户的输入,
        this.$selectValueEle = $("#selectvalue");
        // 查找按钮
        this.$selectBtn = $("#selectBtn");
        this.$tbodyEle = $(".theaters-list");
        this.$curPageEle = $(".curPage");
        this.$eachPageEle = $("input[name=eachPage]");
        this.$totalEle = $(".total");
        this.$firstBtnEle = $("#first-btn");
        this.$prevBtnEle = $("#prev-btn");
        this.$nextBtnEle = $("#next-btn");
        this.$lastBtnEle = $("#last-btn");
        // 获取重新加载数据后要进行时间代理的标签
        this.$optionEle = $("#theatersTable");
    }
    mounted() {
        // 获取影院数据
        this.getTheaters()
        // 获取所有信息
        this.getAllInfo()
    }
    async getTheaters() {
        // 获取服务器返回的对象,内容包括 当前页面  总页数 最大页码数  和信息数组
        const {
            curPage,
            eachPage
        } = this.data;
        // 传当前页和每页显示的条数
        const data = await theaters.get({
            curPage,
            eachPage
        })
        Object.assign(this.data, data)
        this.rerender(this.data.rows)
    }
// 根据所传参数返回是或否
    turnBoolean(data){
        if(data){
            return "是"
        }else{
            return "否"
        }
    }
    // 重新渲染
    rerender(optionData) {
        const str = optionData.map((item) => {
            return `<tr>
              <td style="font-size:20px">${item.cinemasId&&item.cinemasId.name}</td>   
                <td style="font-size:20px">${item.theatersName}</td>
                <td style="font-size:20px">${this.turnBoolean(item.theatersStatus)}</td>                 
                <td style="width:100px">
                <button class="layui-btn layui-btn-sm" data-option="optBtnchange" data-change=${item._id}>修改</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" data-option="optBtnDel" data-del=${item._id}>删除</button>
                </td>
                </tr>`
        }).join("")
        // 渲染放映厅列表
        this.$tbodyEle.html(str);
        // 渲染总条数
        this.$totalEle.html(this.data.total);
        // 选择页码的下拉按钮
        let optionStr = "";
        for (let i = 1; i <= this.data.maxPage; i++) {
            optionStr += `<option value=${i}>${i}</option>`
        }
        // 选择页数
        this.$curPageEle.html(optionStr);
        // 渲染当前页码
        this.$curPageEle.val(this.data.curPage);
        // 渲染当前页面的每页显示条数
        this.$eachPageEle.val(this.data.eachPage)
    }
    first() {
        if (this.data.curPage === 1) {
            window.alert("已经是首页了")
        } else {
            this.data.curPage = 1;
            this.getTheaters()
        }
    }
    prev() {
        if (this.data.curPage === 1) {
            window.alert("已经是第一页了")
        } else {
            this.data.curPage--;
            this.getTheaters();
        }
    }
    next() {
        if (this.data.curPage === this.data.maxPage) {
            window.alert("已经是最后一页了")
        } else {
            this.data.curPage++;
            this.getTheaters();
        }
    }
    last() {
        if (this.data.curPage === this.data.maxPage) {
            window.alert("已经是最后一页了")
        } else {
            this.data.curPage = this.data.maxPage;
            this.getTheaters();
        }


    }
    eachPageHandle(e) {
        this.data.eachPage = this.$eachPageEle.val() - 0;
        this.getTheaters();
    }
    curChange() {
        this.data.curPage = $(".curPage option:selected").val();
        this.getTheaters();
    }
    option(e) {
        let event = window.event || e;
        async function choseOption(event) {
            if ($(event.target).attr("data-option") == "optBtnchange") {
                // 点击修改时的操作
                // 获取要操作的影院Id
                const _id = $(event.target).attr("data-change");
                location.hash = `#/info/change-theaters/${_id}`;
            } else if ($(event.target).attr("data-option") == "optBtnDel") {
                // 点击删除时的操作
                // 获取要操作的影院Id
                const _id = $(event.target).attr("data-del");
                // 删除传入参数是id  返回值是boolean
                const status = await theaters.del({
                    _id
                })
                //  判断是否删除成功
                if (status) {
                    window.alert("删除成功")
                } else {
                    window.alert("删除失败")
                }
            }
        }
        choseOption(event)
        // 冲刺能获取
        this.getTheaters();
    }
    async select() {
        // 获取要查找的类型值
        let cinemasId = this.$selectOption.val();
        // let seleCiname = this.$selectValueEle.val();
        this.selCinemaData = {
            cinemasId
        }
        // 判断用户选择的选项是全选就重新渲染
        if (cinemasId == "allCinemas") {
            console.log(this.data.rows);
            this.rerender(this.data.rows);
        } else {
            // 发送请求查找数据，参数类型是查询字段类型和对应字段的值
            this.data.selInfo = await theaters.select(this.selCinemaData);
            // 把数据渲染到页面
            this.rerender(this.data.selInfo);
            this.renderSeletwo()
        }
    }
    async selectTheater() {
        // 获取要查找的类型值
        let _id = this.$selectValueEle.val();
        this.selTheaterData = {
            _id
        }
        let data = Object.assign(this.selTheaterData, this.selCinemaData)
        // 判断用户是否输入数据
        if (_id=="allTheaters") {
            this.select()         
        } else {
               // 发送请求查找数据，参数类型是查询字段类型和对应字段的值
               this.data.selInfo = await theaters.select(data);
               // 把数据渲染到页面
               this.rerender(this.data.selInfo);
               this.data.eachPage = this.data.selInfo.length;
               this.data.total = this.data.selInfo.length;
               this.data.eachPage = this.data.selInfo.length;
               this.data.maxPage = 1;
        }
    }
    // 渲染第二个查询下拉按钮
    renderSeletwo() {
        let str = this.data.selInfo.map(item => {
            return `<option value=${item._id}>${item.theatersName}</option>`
        })
        this.$selectValueEle.html(`<option value="allTheaters">全部</option>${str}`)
    }
    // 渲染查找项目的对应存在值
    renderSelectCiemas() {
        // 遍历出对应的字段存在的值
        let str = this.NowAllInfo.map(item => {
            return `<option value=${item._id}>${item.name}</option>`
        })
        this.$selectOption.html(`<option value="allCinemas">全部</option>${str}`);
        this.$selectValueEle.html(`<option value="allTheaters">全部</option>`);
        this.rerender(this.NowAllInfo);
    }
    async getAllInfo() {
        // 拿到当前数据下的所有信息
        this.NowAllInfo = await theaters.allCinemas()

        // 渲染用户可选择的查询项目
        this.renderSelectCiemas()
    }
    handle() {
        this.$firstBtnEle.on("click", this.first.bind(this));
        this.$prevBtnEle.on("click", this.prev.bind(this));
        this.$nextBtnEle.on("click", this.next.bind(this));
        this.$lastBtnEle.on("click", this.last.bind(this));
        this.$eachPageEle.on("blur", this.eachPageHandle.bind(this))
        this.$curPageEle.on("change", this.curChange.bind(this))
        this.$optionEle.on("click", "button", this.option.bind(this))
        // 查找影厅添加change事件
        this.$selectOption.on("change", this.select.bind(this))
        // 为查询影院添加change事件
        this.$selectValueEle.on("change", this.selectTheater.bind(this))
        // 为查询类型添加change事件
    }
}